<script setup>
import {onMounted, ref} from 'vue';
import dateUtil from '@/utils/dateUtil';
import chartApi from "@/api/chart.js";
import * as echarts from 'echarts'


const chartRef = ref()
// 加载完成后再进行
onMounted(()=>{
  const myChart = echarts.init(chartRef.value);
  const date = dateUtil.getMonthFistDay();
  const days = dateUtil.getMonthDays();

  chartApi.selectReserveCount(date).then(result => {
    const data = new Array(days.length).fill(0);

    for (let i=0; i<days.length; i++){
      for (let item of result.data){
        if (item.day == days[i]) {
          data[i] = item.count;
        }
      }

      days[i] = days[i].substring(5);
    }

    let option = {
      title: {
        text: '预约趋势',
        textStyle: {
          color: '#161D23',
          fontWeight: 'bold',
          fontSize: '16px',
        },
        left: '10px',
        top: '10px',
      },
      grid: {
        left: '3%',
        right: '30px',
        bottom: '3%',
        top: '40px',
        containLabel: true
      },
      tooltip: {},
      yAxis: {
        type: 'value',
        axisLabel: {color: '#FFF'},
      },
      xAxis: {
        axisLabel: {color: '#161D23'},
        type: 'category',
        data: days,    // 替换成时间
      },
      series: [
        {
          name: '预约数量',
          type: 'line',
          smooth: true,
          data: data,   // 显示数据
          itemStyle: {
            color: '#73C0DE',
          },
          barWidth: '50%',
          label: {
            show: true,
            color: '#73C0DE',
            position: 'top',
          },
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }

    myChart.setOption(option);
  });

});
</script>

<template>

  <div ref="chartRef" style="width: 100%; height: 100%">
  </div>

</template>

<style>

</style>